<template>
<!-- 侧边栏 -->
    <div>
        <div class="panel">
        <div class="header">
            <img src="../../assets/imgs/wm.png" alt="watermelon">
            <div>用户名:{{user[0]}}</div>
        </div>
        <div class="content">
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon1.png" alt="look">
                </div>
                <div class="text">
                    <span>我的关注</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon2.png" alt="">
                </div>
                <div class="text">
                    <span>我的收藏</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon3.png" alt="">
                </div>
                <div class="text">
                    <span>消息</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon4.png" alt="">
                </div>
                <div class="text">
                    <span>购物车</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon5.png" alt="">
                </div>
                <div class="text">
                    <span>订单</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon6.png" alt="">
                </div>
                <div class="text">
                    <span>薯券</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon7.png" alt="">
                </div>
                <div class="text">
                    <span>心愿单</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon8.png" alt="">
                </div>
                <div class="text">
                    <span>黑卡会员</span>
                </div>
            </div>
            <div class="con_item">
                <div class="img">
                    <img src="../../assets/imgs/icon9.png" alt="">
                </div>
                <div class="text">
                    <span>设置</span>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                user:['张三']
            }
        }
    }
</script>

<style lang="less" scoped>
.panel{
    width: 100%;
    height: 100%;
    .header{
        width: 100%;
        height: 100%;
        font-size: 18px;
        text-align: center;
        margin-top: 60px;
        img{
            width: 40px;
            height: 40px;
        }
    }
    .content{
        padding: 30px;
        .con_item{
            line-height: 25px;
            font-size: 14px;
            margin-bottom: 30px;
            display: flex;
            img{
                width: 24px;
                height: 24px;
                margin-right: 18px;
            }
        }
    }
}
</style>